<template>
	
		
	
	<view class="order-bg">
		<u-navbar  title="确认订单" :background="background" :border-bottom="false" title-color="#fff" back-icon-color="#fff"></u-navbar>
		<view style="background-color:#E95F3D;">
		<view class=""  style="padding-bottom: 160px;background-color: #F5F5F7;border-radius:  40rpx 40rpx 0px 0px;">
			<view class="">
			<view class="flex row-between ">
				<view class="bold xxl m-l-50 m-t-48" >{{carInfo.car_mes.car_name || '车型'}}</view>
				<view class="flex m-t-36 col-bottom" @click="popupCar" >
					<view class="select-car flex-content">
						
				
					<image :class="carInfo.car_mes.id==1?'lianlun':''" :src="!!carInfo.car_mes.cover?carInfo.car_mes.cover:'http://hy.skwcloud.com/uploads/images/202111171103022c6dd1499.png'" mode="widthFix"></image>
						</view>
					<view class="flex-content row-center changecar-btn m-r-50">
						换车型
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
			</view>	
			</view>
			<view class="p-20 m-t-18">
				
			
			<view class="order-top bg-white br20  " style="box-shadow: 0upx 10upx 10upx 0upx #ededed;">
				<view class="m-b-30 m-t-20">
					<view class="p-t-40">
						<view class="flex row-between" @click="placedetail">
							
					     <view class="">
					
						<view class="m-b-20">
							<view class="flex  col-center">
								  <view class="start-icon">
								  	
								  </view>
								<view >
									<view class=" xxl">{{!!addressList[0].name?addressList[0].name:'开始地址'}}</view>
								</view>
							</view>	
						</view>
						<view class="flex m-t-10 m-b-10" v-if="addressList.length-2>0" >
							<view class="pass">
								<image src="http://hy.skwcloud.com/uploads/images/202111261114000727b6388.png" mode=""></image>
							</view>
							<view style="color: #b6b5b4;" class="xxs bold">{{(addressList.length-2) || 0}}个经停站</view>
						</view>
						<view>
							<view class=" flex  m-b-30 col-center">
								<view class="end-icon">
									
								</view>
									<view >
										<view class=" xxl">{{!!addressList[addressList.length-1].name?addressList[addressList.length-1].name:'结束地址'}}</view>
									</view>
							</view>	
							
							</view>
						</view>
						<view class="p-r-20">
							<u-icon name="arrow-right" color=" #c1c1c1" size="38" ></u-icon>
						</view>
						</view>
						<view class="flex row-between use-time p-b-28">
							<view class="use-title xl p-l-40">
								用车时间
							</view>
							<view class="xl flex col-center" @click="subTimeShow=true">
							<view class="xl flex "  v-if="useValue!='现在用车'">
								预约{{subscribeValue}}
							</view>	
						<view class="" v-else>
								{{useValue}}
						</view>
						
							<view class="m-l-16 m-r-20">
									<u-icon color="#959595" name="arrow-right"></u-icon>
							</view>
							</view>
						
						
						</view>
					</view>
				</view>
			</view>
			</view>
			<view class="p-l-20 p-r-20 ">
				
		
			<view class=" bg-white br20  p-l-25 p-r-25" style="box-shadow: 0upx 5upx 10upx 0upx #ededed;">
				<view class="flex row-between base-item   xl"  >
					<view class="">物品重量</view>
					<view class="flex"  >
						<u-input v-model="weight" placeholder="请输入物品重量(吨)" input-align="right" height="44" :clearable="false" maxlength="5"></u-input>
						
					</view>
				</view>
				<view class="flex row-between base-item  xl">
					<view class="xl">
						联系方式
					</view>
					<view  @click="mobileValue=mobile;userShow=true">
						{{!!mobile?mobile:'添加联系方式'}}
							<u-icon name="arrow-right" color=" #c1c1c1" ></u-icon>
					</view>
				</view>
				
				<navigator url="/bundle/pages/goods_desc/goods_desc?select=1"  class="flex row-between base-item xl" hover-class="none">
					<view class="xl">订单备注</view>
					<view>
						<u-icon name="arrow-right" color=" #c1c1c1" ></u-icon>
					</view>
				</navigator>
				<navigator   class="flex row-between  base-item  xl" hover-class="none">
				 <view class="">
				 	跟车情况
				 </view>
					<view class="flex">
							<view @click="followshow=true" class="primary ">{{passenger_num==0?'不跟车':passenger_num+'人跟车'}}</view>
						<u-icon name="arrow-right" color=" #c1c1c1" ></u-icon>
					</view>
				</navigator>
				<view   @click="openneed" class="flex row-between base-item  xl" hover-class="none">
					<view>额外需求</view>
					<view>
						<u-icon name="arrow-right" color=" #c1c1c1" ></u-icon>
					</view>
				</view>
				<view   @click="openSelectDriver" class="flex row-between base-item  xl" hover-class="none" style="border-bottom: none;">
					<view>选择收藏司机</view>
					<view>
						<u-icon name="arrow-right" color=" #c1c1c1" ></u-icon>
					</view>
			
				</view>
	</view>
	</view>
		 <view class="p-20 ">
			<view class="" style="#959595">
				<view class="flex sm" >
					号码保护全程隐藏您的真实手机号，保护您的隐私
					<u-icon color="#666666" name="question-circle" size="30"></u-icon>
				</view>
				
			<view class=" m-t-10" style="display: flex;">
				<view class="is-affirm flex-content" v-if="isAgree" @click="closeisAgree">
					<u-icon name="checkmark" color="#fff"></u-icon>
				</view>
				<view class="no-affirm" @click="isIsAgree" v-else></view>
				<view class="need-know">
					<view class="">
						我已阅读并同意<text style="color: #E85631 ;">《货司拉货物托运居间服务协议》</text>及<text style="color: #E85631 ;">《个</text>
					</view>
					<view class="" style="color: #E85631 ;">
						人信息保护及隐私政策》
					</view>
			</view>
			</view>
			</view>
		</view>
		</view>
		</view>
		
		<view class="bg-white br20 p-t-30 p-b-40 p-l-30 p-r-30 order-bottom" >
			<view class="flex base-item row-center" @click="typeShow=true" style="border-bottom: none;position: relative;">
				<view class="flex col-baseline " style="position: absolute;left:15%">
					<!-- <view class="m-r-8">
						<image src="http://hy.skwcloud.com/uploads/images/20211126112956299670022.png" mode=""></image>
					</view> -->
					<view class="bold md flex" style="color: #686868;">
						{{typeValue}}
						<view class="  flex row-center" style="width: 48upx;height: 48upx;margin-left: -8upx;">
							<u-icon name="arrow-down-fill" size="18" color="#686868"></u-icon>
						</view>
					</view>
				</view>
				<view class="flex flex-1 row-center primary">
					<view class="">
						
				
						<view class="flex">
					<view class="">
						￥
					</view>
					<view class="bold  " style="font-size: 56upx;">
						{{total}}
					</view>
					<view class="p-t-20" v-if="couponitem.couponmoney" style="color: #737272 ;margin-left: 5rpx;text-decoration: line-through;">
						￥{{couponitem.price}}
					</view>
				  
							</view>
							<view class="xxs" v-if="couponitem.couponmoney" style="margin-top: 5rpx;color: #000000;">
								券已抵<text style="color: #DF4720 ;">{{couponitem.couponmoney}}</text>元
							</view>
					</view>
				</view>
				
			</view>
			<view class="pay-btn" @click="nowPay">
				下单
			</view>
		</view>
		<!-- 底部弹出层 -->
		<u-popup v-model="userShow" mode="bottom" :closeable="true" border-radius="10">
			<view class="p-50">
				<view class="bold text-center xl">
					订单联系人
				</view>
				<view class="primary m-t-30 m-b-30 bold">
					司机将优先联系此号码	
				</view>
				<view class="p-10 p-l-30 br10 " style="background-color: #f4f4f4;">
					<u-input type="text" value="" v-model="user_name" placeholder="请输入联系人" maxlength="11" />
				</view>
				<view class="p-10 p-l-30 br10 m-t-10" style="background-color: #f4f4f4;">
					<u-input type="number" value="" v-model="mobileValue" placeholder="请输入联系人电话" maxlength="11" />
				</view>
				<view class="m-t-25 mobile-btn" @click="addUser">
					确认
				</view>
			</view>
		</u-popup>
		<u-popup border-radius="18" v-model="followshow" mode="bottom" :closeable="true" close-icon-pos="top-left">
					<view class="flex row-around " style="padding-top: 80rpx;">
						<view class="bold" style="font-size: 40rpx;">
							<view class="m-l-80" style="display:block;">
								您是否安排人员跟车?
							</view>
							<view class="m-l-80 m-t-20" style="font-size: 24rpx;color: #c9c9c9;">
								为保障跟车人员的人身安全，货箱不得载客，且不得超过运输车辆核载人数
							</view>
						</view>
						<view style="width: 168rpx;">
							<image style="width: 168rpx;" src="../../static/images/carfollowing.png" mode="widthFix"></image>
						</view>
					
					</view>
					<view class="follow-content flex" style="padding-top: 60rpx; padding-bottom: 70rpx;">
						<view class="follow-btn flex-content" @click="changFollow(0)" :class="passenger_num==0?'follow-style':''">
							无人跟车
						</view>
						<view class="follow-btn flex-content" @click="changFollow(1)" :class="passenger_num==1?'follow-style':''">
							1人跟车
						</view>
						<view class="follow-btn flex-content" @click="changFollow(2)" :class="passenger_num==2?'follow-style':''">
							2人跟车
						</view>
					</view>
				</u-popup>
		<!-- 车辆类型选择 -->
		<u-select :list="typeList" v-model="typeShow" @confirm="selectSure($event,1)"></u-select>
		<!-- 用车方式 -->
		<u-select :list="useList" v-model="useShow" @confirm="selectSure($event,2)"></u-select>
		
		<!-- 预约时间 -->
				<u-popup v-model="placeprop" mode="bottom" :closeable="true" close-icon-pos="top-left"  border-radius="14">
					<view class="place-title xxl bold flex row-center p-t-32">
						地址详情
					</view>
					<view class="flex m-t-26">
						<view class="statrt-icon flex-content">
							发
						</view>
						<view class="xxl bold m-l-24">
							{{addressList[0].name}}
						</view>
					</view>
					<view class="place-detail flex">
						{{addressList[0].province}}{{addressList[0].city}}{{addressList[0].district}}
					</view>
					<view class="flex m-t-26 m-t-18">
						<view class="statrt-icon flex-content" style="background-color:#E85631;">
							收
						</view>
						<view class="xxl bold m-l-24" >
							{{addressList[1].name}}
						</view>
					</view>
					<view class="place-detail flex" style="border: none;" >
						{{addressList[1].province}}{{addressList[1].city}}{{addressList[1].district}}
					</view>
				</u-popup>
		<u-select :list="subList" v-model="subTimeShow" @confirm="selectSure($event,3)" mode="mutil-column-auto"></u-select>
		<car-popup ref="carPopup" @sureCar="sureCar"></car-popup>
			<u-popup v-model="selecDriver" mode="bottom" border-radius="14">
				<view class="">
					
					<view class="flex-content lg" style="height: 110rpx; width: 100%;border-bottom: 2rpx solid #EEEEEE;">
						仅发送给所有收藏的司机
					</view>
					<navigator url="/bundle/pages/driver_select/driver_select" hover-class="none">
					<view  class="flex-content lg" style="height: 110rpx; width: 100%;border-bottom: 2rpx solid #EEEEEE;">
						发送给指定的司机
					</view>
					</navigator>
					<view class="flex-content lg" style="height: 110rpx; width: 100%;">
						不使用此功能
					</view>
					<view class="flex-content lg" style="height: 36rpx; width: 100%;background-color: #F6F6F6;">
						
					</view>
					<view class="flex-content lg" @click="closeselect" style="height: 126rpx; width: 100%; color: #959494;">
						取消
					</view>
					</view>
				</u-popup>
	</view>
	
</template>

<script>
		// import {computeMoney,} from '@/api/user';
	import {computeMoney,sendTask,useCoupon} from '@/api/user'
	import {getOrderDetail} from '@/api/order'
	import {carDetail} from '@/api/car'
	import hour from '@/utils/time.js'
	export default {
	    data() {
			return{
				background:{
					
					background: 'url(https://hy.qslmkj.com/uploads/images/20211216103055d736f7827.png) no-repeat',
				},
				tranInfo:null,
				addressList:[],
				carInfo:null,
				// 现在用车
				useValue:'现在用车',
				useShow:false,
				// 跟车
				is_passenger:0,
				passenger_num:0,
				
				user_name:'',
				mobile:'',
				mobileValue:'',
				followshow:false,
				is_subscribe:0,
				subscribe_time:'',
				subList:[],
				couponitem:{
					
				},
				typeValue:'快车',
				typeList:[
					{
						label:'快车',
						value:'1'
					},
					{
						label:'顺风车',
						value:'2'
					}
				],
				useList:[
					{
						label:'现在用车',
						value:'1'
					},
					{
						label:'预约用车',
						value:'2'
					}
				],
				type:1,
				typeShow:false,
				isAgree:false,
				is_carry:0,
				is_elevator:1,
				floor_num:1,
				is_back:0,
				weight:'',
				onecopon:0,
				twocopon:0,
				carryValue:'需要搬运、回城等',
				
				
				descValue:'如货物类别等',
				user_remarks:'',
				
				// 弹出
				userShow:false,
				subTimeShow:false,
				params: {
					year: false,
					month: true,
					day: true,
					hour: true,
					minute: true,
				},
				
				total:0,
				isChange:false,
				subscribeValue:'请选择',
				
				order_id:null,
				itemprice:{
					one:"",
					tow:""
				},
				placeprop:false,
				selecDriver:false
			}
		},
		onLoad(option) {
			this.itemprice.one=option.price
			this.itemprice.tow=option.total_two
			
			this.onecopon=option.onecopon
			this.twocopon=option.twocopon
			// console.log(31231231);
			// console.log(this.onecopon,this.twocopon);
			this.type=option.cartype
			if(option.cartype=="1"){
				this.total = option.price
				this.typeValue=this.typeList[0].label
			}else if(option.cartype=="2"){
				this.total = option.total_two
					this.typeValue=this.typeList[1].label
			}
			this.is_subscribe = 0;
			this.subscribeValue = '请选择';
			this.subList = hour.today;
			
			this.tranInfo = this.$store.state.app.tranInfo.concat();
			this.addressList =  this.$store.state.app.addressList
			console.log(this.addressList);
			this.carInfo = JSON.parse(JSON.stringify(this.$store.state.app.carInfo))
			
			// let op =decodeURIComponent(option)
			// console.log(op);
			
			if(!!option['price']){
				
			}
			if(!!option['id']){
				this.order_id = option.id;
				this.getOrderDetailFun();
			}
		
			if(option['time']==1){
				this.is_subscribe = 1;
				let e = this.$store.state.app.timeInfo.concat();
				// console.log(e===);
				let year = this.$u.timeFormat(e[0].value,'yyyy-mm-dd')
				let name = e[0].label;
				let hour = e[1].value;
				let min = e[2].value;
				
				console.log(year)
					this.useValue=''
				this.subscribeValue = `${name} ${hour}:${min}`
				this.subscribe_time = `${year} ${hour}:${min}`
			}
			this.getcoupon()
		
		},
		watch:{
			isChange(value){
				console.log(value)
				if(value){
					this.computeMoneyFun();
				}
			}
		},
		onUnload(){
		},
		methods:{
			async getcoupon(){
			 	let coupid=0
				 if(this.type==1){
					coupid=this.onecopon
					if(coupid=='a'){
						return					 
					}
				 }else if(this.type==2){
					 coupid=this.twocopon
					 if(coupid=='b'){
						 return
					 }
				 }
				 // console.log(coupid);
				let res = await useCoupon({money:this.total,status:this.type,id:coupid})
				this.couponitem.price=this.total
				this.couponitem.couponmoney=res.data.preferential,
				this.total=res.data.discount_money
			},
			//弹窗
			closeselect(){
				this.selecDriver=false
			},
			openSelectDriver(){
				this.selecDriver=true
			},
			placedetail(){
				this.placeprop=true
			},
			openneed(){
				
				uni.navigateTo({
					url:`/bundle/pages/goods_desc/goods_desc?select=2&carid=${this.carInfo.car_mes.id}`
				})
			},
			closeisAgree(){
				this.isAgree=false
			},
			isIsAgree(){
				this.isAgree=true
			},
			//改变跟车人数
			changFollow(id){
				this.passenger_num=id
				this.followshow=false
			},
			carDetailFun(id){
				carDetail({id}).then(res=>{
					if(res.code==1){
						console.log(res);
						this.carInfo.car_category_id = res.data.info.category_id;
						this.carInfo.car_mes = res.data.info;
						// this.orderType = res.data.info.car_name;
						// this.content = res.data.info.explain;
						this.computeMoneyFun();
					}
				})
			},
			sureCar(e){
				this.carDetailFun(e)
			},
			popupCar(){
				this.$refs.carPopup.value = this.carInfo.car_mes.id;
				this.$refs.carPopup.show = true;
			},
			sendTaskFun(){
				var _this = this;
				
				let car_category_id = this.carInfo.car_category_id;
				let car_id = this.carInfo.car_mes.id;
				let label_ids = this.carInfo.label;
				// let {user_name} = this;
				let transport_address = this.tranInfo;
				//is_subscribe 判断是否预约
				let {user_name,mobile,
				type,is_carry,is_elevator,floor_num,is_passenger,passenger_num,is_back,weight,
				is_subscribe,user_remarks,subscribe_time 
				} = this;
				let coupid=0
				 if(this.type==1){
					coupid=this.onecopon
					if(coupid=='a'){
						return					 
					}
				 }else if(this.type==2){
					 coupid=this.twocopon
					 if(coupid=='b'){
						 return
					 }
				 }
				let latitude =  transport_address[0].start_latitude;
				let longitude = transport_address[0].start_longitude;
				
				sendTask({
					coupon_list_id:coupid,
					car_category_id,car_id,
					user_name,mobile,
					total_amount:this.total,
					order_amount:this.total,
					type,is_carry,is_elevator,floor_num,is_passenger,passenger_num,is_back,weight,
					is_subscribe,transport_address:JSON.stringify(transport_address),user_remarks,
					latitude,longitude,label_ids,subscribe_time,
				}).then(res=>{
					console.log(res)
					
					if(res.code==1){
						uni.navigateTo({
							url:'/bundle/pages/pay/pay?order_id=' + res.data.id
						})
					}
				})
				
			},
			getOrderDetailFun(){
				getOrderDetail({
					id:this.order_id
				}).then(res=>{
					console.log(res);
					const data = res.data;
					this.user_name = data.user_name;
					this.mobile = data.mobile;
					this.mobileValue = data.mobile;
					this.weight = data.weight;
					this.is_carry = data.is_carry;
					this.is_elevator = data.is_elevator;
					this.floor_num = data.floor_num;
					this.is_back = data.is_back;
					this.type = data.type;
					this.typeValue = this.type==1?'快车':'顺风车';
					this.is_passenger = data.is_passenger;
					this.passenger_num = data.passenger_num;
					this.is_subscribe = data.is_subscribe;
					this.computeMoneyFun();
					
				})
			},
			nowPay(){
				var _this = this;
				if(this.user_name=='' || this.mobile==''){
					this.userShow = true;
					return 
				}
				// if(this.is_passenger == null){
				// 	uni.navigateTo({
				// 		url:'/bundle/pages/follow_car/follow_car?value=' + this.passenger_num
				// 	})
				// 	return 
				// }
				if(this.weight==''){
					this.$toast({
						title:'请输入运输物品的重量'
					})
					return 
				}
				if(this.min_time==''){
					this.$toast({
						title:'请选择最早时间'
					})
					return
				}
				if(this.max_time==''){
					this.$toast({
						title:'请选择最晚时间'
					})
					return
				}
				if(!this.isAgree){
					this.$toast({
						title:"请先同意协议"
					})
					return
				}
				uni.showModal({
					title:'提示',
					content:'是否确认下单',
					success:res=>{
						if(res.confirm){
							_this.sendTaskFun();
						}
					}
				})
				
				
				
				
				
			},
			
			timeSure(e,index){
				console.log(e);
				console.log(index);
				var date = new Date();
				let year =  date.getFullYear();
				
				if(index==1){
					this.subscribeValue = e.month + '-' + e.day + ' '  + e.hour + ':' + e.minute;
					this.subscribe_time = year+'-' + this.subscribeValue
				}
				if(index==2){
					this.minTimeValue = e.month + '-' + e.day + ' '  + e.hour + ':' + e.minute;
					this.min_time = year+'-' + this.minTimeValue
				}
			},
			selectSure(e,index){
		
				if(index==1){
				
					this.typeValue = e[0].label;
				     console.log(this.typeValue);
					this.type = e[0].value;
				
					if(this.type==1){
							this.total=this.itemprice.one
					}else if(this.type==2){
						console.log(this.itemprice);
						this.total=this.itemprice.tow
						
						
					}
					this.isChange = true;
				}
				if(index==2){
					this.useValue = e[0].label;
					this.is_subscribe = e[0].value*1 - 1
					
				}
				if(index==3){
					let year = this.$u.timeFormat(e[0].value,'yyyy-mm-dd')
					let name = e[0].label;
					let hour = e[1].value;
					let min = e[2].value;
					console.log(year)
					this.useValue="1"
					this.subscribeValue = `${name} ${hour}:${min}`
					this.subscribe_time = `${year} ${hour}:${min}`
						
				}
					this.getcoupon()
			},
			addUser(){
				if(this.mobileValue==''){
					this.userShow = false
					return 
				}
				console.log(this.$u.test.mobile(this.mobileValue))
				if(this.$u.test.mobile(this.mobileValue)){
					this.mobile = this.mobileValue;
					this.userShow = false
				}
				else{
					this.$toast({
						title:'请输入正确的手机号码',
					})
				}
			},
			computeMoneyFun(){
				let car_id = this.carInfo.car_mes.id;
				let {is_carry,is_elevator,floor_num,is_back,tranInfo} = this;
				
				computeMoney({
					car_id,is_carry,is_elevator,floor_num,is_back,transport_address:JSON.stringify(tranInfo),
					type:this.type
				}).then(({code,data})=>{
					this.isChange = false
					console.log(code);
					console.log(data);
					if(code==1){
					if(this.type==1){
						this.total = data.price
						
					}else{
					this.total = data.price_two	
					}
					this.getcoupon()
					}
					// code==1 && ()
					
				})
			}
		},
	
	}
</script>

<style scoped lang="scss">
	.place-detail{
		margin-top: 6rpx;
		margin-bottom: 11rpx;
		padding-top: 8rpx;
		padding-bottom: 15rpx;
		padding-left: 40rpx;
		margin-left: 80rpx;
		border-left: 2rpx dashed #BBBBBB;
		color: #7D7D7D;
		font-size: 30rpx;
		
	}
	.statrt-icon{
		background-color: #666666 ;
		color: #FFFFFF;
		margin-left: 60rpx;
		width: 46rpx;
		height: 46rpx;
		border-radius: 39rpx;
	}
	.place-title{
		width: 100%;
	}
	.use-title{
		color: #666666 ;
	}
	.use-time{
		padding-top: 30rpx;
		border-top:3rpx solid #E6E5E5;
		
	}
	.start-icon{
		width: 30rpx;
		height: 30rpx;
		background-color: #222222;
		margin-left: 40rpx;
		margin-right: 36rpx;
		border-radius: 20rpx;
	}
	.end-icon{
		width: 30rpx;
		margin-left: 40rpx;
		margin-right: 36rpx;
		height: 30rpx;
		background-color: #E85631;
		border-radius: 20rpx;
	}
	.changecar-btn{
		color: #666666 ;
		width: 128rpx;
		height: 48rpx;
        border: 2rpx solid #B3B3B3;
		border-radius: 14rpx;
	}
	.lianlun{
		width: 80rpx !important;
		
	}
	.select-car{
		
			width: 174rpx;
		image{
			width: 174rpx;
		}
	}
	.follow-style{
		border: 2rpx solid #E85631 !important;
		background-color:#FDEEEA ;
	}
	.follow-btn{

		width: 186rpx;
		height: 76rpx;
		border-radius: 10rpx;
		margin-left: 46rpx;
		border: 2rpx solid #D2D2D2;
	}
	.base-item{
		align-items: center;
		height: 100rpx;
		border-bottom: 3rpx solid #E6E5E5;
	}
	.order-bg{
		// background-image: url(https://hy.qslmkj.com/uploads/images/20211216103055d736f7827.png);
		background-size: 100% auto;
		height: 307rpx;
		background-repeat: no-repeat;
		padding-bottom: 120rpx;
	}
	.order-top{
		.pass{
			margin-right: 10rpx;
			image{
				width: 22rpx;
				height: 22rpx;
			}
		}
		image{
			width: 80rpx;
		}
	}
	.mobile-btn{
		background-color: #df563b;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
		padding:20rpx 0rpx ;
	}
	.order-bottom{
		box-shadow: 0upx -10upx 10upx 0upx #ededed;
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index: 20;
		.pay-btn{
			margin-top: 40rpx;
			box-shadow: 0upx 10upx 10upx 0upx #f7d4cd;
			background: linear-gradient(#e36e51  , #df563b);
			color: #fff;
			padding: 30rpx 0;
			text-align: center;
			border-radius: 10rpx;
		}
		image{
			width: 27rpx;
			height: 27rpx;
		}
	}
	.left-bg{
		width: 5rpx;
		height: 30rpx;
		background-color: #df563b;
		border-radius: 10rpx;
	}
	.add{
		position: relative;
		padding: 30upx 30upx 26upx 55upx;
		height: 110upx;
		border-radius: 20upx;
		background-color: #f3f4f5;
		.send-tap{
			position: absolute;
			top: 0;
			left: 0;
			image{
				width: 60upx;
				height: 60upx;
			}
			
		}
		.comment{
			color: #a0a0a0;
		}
		.map{
			image{
				width: 35upx;
				height: 35upx;
			}
		}
	}
	.is-affirm{
		width: 30rpx;
		margin-right: 16rpx;
		height: 30rpx;
		border-radius: 49rpx;
		background-color: #E85631;
	}
	.no-affirm{
		width: 30rpx;
		margin-right: 16rpx;
		height: 30rpx;
			border-radius: 49rpx;
		border: 3rpx solid #dadada;
	}
</style>